<template>
  <div class="articles">
    <el-card>
      <my-header slot="header" title="内容管理"></my-header>
      <!-- 筛选区 -->
      <div class="filter-box">
        <el-form :model="form" label-width="80px">
          <el-form-item label="状态">
            <el-radio v-model="form.status" :label="null">全部</el-radio>
            <el-radio v-model="form.status" label="0">草稿</el-radio>
            <el-radio v-model="form.status" label="2">审核通过</el-radio>
          </el-form-item>
          <el-form-item label="频道">
            <el-select v-model="form.channel_id">
              <el-option
                v-for="item in channels"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期">
            <!-- 日期选择器 -->
            <el-date-picker
              v-model="value"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="onChange"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :loading="isLoading"
              @click="queryArticles"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- 文章列表 -->
    <el-card class="articles-head">
      <div slot="header">
        根据晒寻条件查询到{{ articles.total_count }}条数据,当前时第{{
          articles.page
        }}页
      </div>
      <transition name="fade">
        <div v-if="articles">
          <el-table class="table" :data="articles.results">
            <el-table-column label="封面">
              <template v-slot="scope">
                <img class="cover" :src="scope.row.cover.images[0]" alt="" />
              </template>
            </el-table-column>
            <el-table-column prop="title" label="标题"></el-table-column>
            <el-table-column label="状态">
              <template v-slot="scope">
                <el-button
                  v-if="scope.row.status === 2"
                  type="success"
                  plain
                  size="small"
                  >审核通过</el-button
                >
                <el-button
                  v-else-if="scope.row.status === 0"
                  type="primary"
                  plain
                  size="small"
                  >草稿</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="pubdate" label="发布时间"></el-table-column>
            <el-table-column label="操作">
              <template v-slot="scope">
                <el-button
                  @click.stop="toEdit(scope.row)"
                  type="primary"
                  icon="el-icon-edit"
                  size="small"
                  circle
                ></el-button>
                <el-button
                  @click.stop="delArticles(scope.row)"
                  type="danger"
                  icon="el-icon-delete"
                  size="small"
                  circle
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              @current-change="handleCurrentChange"
              background
              :current-page="pagination.currentPage"
              layout="total, prev, pager, next"
              :total="pagination.total"
            >
            </el-pagination>
          </div>
        </div>
      </transition>
    </el-card>
  </div>
</template>
<script>
import { getChannels, getArticles, romveArticle } from '@/api/articles'
export default {
  name: 'Articles',
  data () {
    return {
      isLoading: true,
      pagination: {
        currentPage: 1,
        total: 100
      },
      form: {
        status: null, // 状态
        channel_id: null, // 频道id
        begin_pubdate: null, // 起始时间
        end_pubdate: null, // 截止时间
        page: null, // 页码 默认1
        per_page: null, // 每页数量，默认每页 10 条
        response_type: null
      },
      // 日期选择器值
      value: '',
      // 文章频道
      channels: [{ id: null, name: '查询全部' }],
      // 文章列表
      articles: '',
      // 列表长度
      articlesLength: 0
    }
  },
  methods: {
    // 去编辑
    toEdit (row) {
      const id = row.id.toString()
      this.$router.push('/addArticle?id=' + id)
    },
    // 删除文章
    async delArticles (row) {
      this.$confirm('确认删除此条文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (row.status === 2) {
            this.$message.warning('您的权限不够，请联系管理员')
            return
          }
          if (this.articlesLength === 1) {
            this.pagination.currentPage--
          }
          if (row.id instanceof Object) {
            const target = row.id.toString()
            await romveArticle(target)
            this.getData()
          } else {
            await romveArticle(row.id)
            this.getData()
          }
        })
        .catch(() => {})
    },

    // 当页码改变时
    handleCurrentChange (page) {
      this.pagination.currentPage = page
      this.getData()
    },
    // 当日期选择器改变时
    onChange (e) {
      if (e) {
        this.form.begin_pubdate = e[0]
        this.form.end_pubdate = e[1]
      } else {
        this.form.begin_pubdate = null
        this.form.end_pubdate = null
      }
    },
    queryArticles () {
      this.isLoading = true
      this.pagination.currentPage = 1
      this.getData()
    },
    // 获取文章列表
    getData () {
      // 获取文章列表
      const _query = {
        ...this.form,
        page: this.pagination.currentPage,
        per_page: 10
      }
      getArticles(_query).then(res => {
        this.articlesLength = res.data.results.length
        this.articles = res.data
        this.pagination.total = res.data.total_count
        this.isLoading = false
      })
    }
  },
  created () {
    // 获取文章频道
    getChannels().then(res => {
      this.channels.push(...res.data.channels)
      window.console.log(res.data.channels)
    })
    this.getData()
  }
}
</script>
<style lang="less">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.6s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.articles {
  .articles-head {
    margin-top: 20px;
    .table {
      .cover {
        width: 150px;
        height: 100px;
        display: block;
      }
    }
    .pagination {
      text-align: center;
      margin-top: 30px;
    }
  }
}
</style>
